<template>
    <div class="project-settings-container">
        <n-card title="项目设置" class="settings-card">
            <template #header-extra>
                <n-space>
                    <n-button @click="cancel" quaternary>
                        取消
                    </n-button>
                    <n-button @click="save" type="primary">
                        保存
                    </n-button>
                </n-space>
            </template>

            <n-tabs type="segment" animated>
                <n-tab-pane name="general" tab="基本信息">
                    <n-form ref="formRef" :model="formData" :rules="rules" label-placement="left" label-width="120"
                        require-mark-placement="right-hanging">
                        <n-form-item label="项目名称" path="name">
                            <n-input v-model:value="formData.name" placeholder="请输入项目名称" />
                        </n-form-item>

                        <n-form-item label="项目描述" path="description">
                            <n-input v-model:value="formData.description" type="textarea" placeholder="请输入项目描述"
                                :autosize="{ minRows: 3, maxRows: 5 }" />
                        </n-form-item>

                        <n-form-item label="创建日期">
                            <n-date-picker v-model:value="formData.createDate" type="date" clearable />
                        </n-form-item>

                        <n-form-item label="项目标签">
                            <n-dynamic-tags v-model:value="formData.tags" />
                        </n-form-item>

                        <n-form-item label="项目封面">
                            <n-upload action="#" :default-upload="false" :on-before-upload="handleUpload"
                                list-type="image-card" :max="1" :default-file-list="coverFileList">
                                点击上传
                            </n-upload>
                        </n-form-item>
                    </n-form>
                </n-tab-pane>

                <n-tab-pane name="canvas" tab="画布设置">
                    <n-form :model="formData" label-placement="left" label-width="120">
                        <n-form-item label="画布尺寸">
                            <n-input-group>
                                <n-input-number v-model:value="formData.canvas.width" :min="100" :max="3840"
                                    placeholder="宽度" />
                                <n-input-group-label>×</n-input-group-label>
                                <n-input-number v-model:value="formData.canvas.height" :min="100" :max="2160"
                                    placeholder="高度" />
                                <n-button @click="setPreset('hd')">高清</n-button>
                                <n-button @click="setPreset('fullHd')">全高清</n-button>
                                <n-button @click="setPreset('4k')">4K</n-button>
                            </n-input-group>
                        </n-form-item>

                        <n-form-item label="背景颜色">
                            <n-color-picker v-model:value="formData.canvas.backgroundColor" />
                        </n-form-item>

                        <n-form-item label="帧率 (FPS)">
                            <n-input-number v-model:value="formData.canvas.fps" :min="1" :max="60" :step="1" />
                        </n-form-item>

                        <n-form-item label="网格显示">
                            <n-switch v-model:value="formData.canvas.showGrid" />
                        </n-form-item>

                        <n-form-item label="网格大小" v-if="formData.canvas.showGrid">
                            <n-input-number v-model:value="formData.canvas.gridSize" :min="10" :max="100" :step="10" />
                        </n-form-item>
                    </n-form>
                </n-tab-pane>

                <n-tab-pane name="export" tab="导出设置">
                    <n-form :model="formData" label-placement="left" label-width="120">
                        <n-form-item label="导出格式">
                            <n-select v-model:value="formData.export.format" :options="exportFormatOptions"
                                placeholder="请选择导出格式" />
                        </n-form-item>

                        <n-form-item label="视频质量"
                            v-if="formData.export.format === 'mp4' || formData.export.format === 'webm'">
                            <n-slider v-model:value="formData.export.quality" :step="1" :min="1" :max="10"
                                :tooltip="true" />
                        </n-form-item>

                        <n-form-item label="导出分辨率">
                            <n-radio-group v-model:value="formData.export.resolution" name="resolution">
                                <n-space>
                                    <n-radio value="same">与画布相同</n-radio>
                                    <n-radio value="custom">自定义</n-radio>
                                </n-space>
                            </n-radio-group>
                        </n-form-item>

                        <n-form-item label="自定义分辨率" v-if="formData.export.resolution === 'custom'">
                            <n-input-group>
                                <n-input-number v-model:value="formData.export.width" :min="100" :max="3840"
                                    placeholder="宽度" />
                                <n-input-group-label>×</n-input-group-label>
                                <n-input-number v-model:value="formData.export.height" :min="100" :max="2160"
                                    placeholder="高度" />
                            </n-input-group>
                        </n-form-item>
                    </n-form>
                </n-tab-pane>

                <n-tab-pane name="advanced" tab="高级设置">
                    <n-form :model="formData" label-placement="left" label-width="120">
                        <n-form-item label="自动保存">
                            <n-switch v-model:value="formData.advanced.autoSave" />
                        </n-form-item>

                        <n-form-item label="保存间隔 (分钟)" v-if="formData.advanced.autoSave">
                            <n-input-number v-model:value="formData.advanced.autoSaveInterval" :min="1" :max="60"
                                :step="1" />
                        </n-form-item>

                        <n-form-item label="历史记录数">
                            <n-input-number v-model:value="formData.advanced.historySteps" :min="5" :max="100"
                                :step="5" />
                        </n-form-item>

                        <n-form-item label="默认过渡时长 (秒)">
                            <n-input-number v-model:value="formData.advanced.defaultTransitionDuration" :min="0.1"
                                :max="10" :step="0.1" />
                        </n-form-item>

                        <n-form-item label="性能模式">
                            <n-select v-model:value="formData.advanced.performanceMode"
                                :options="performanceModeOptions" placeholder="请选择性能模式" />
                        </n-form-item>
                    </n-form>
                </n-tab-pane>
            </n-tabs>
        </n-card>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import type { UploadFileInfo } from 'naive-ui'
import {
    NCard,
    NButton,
    NSpace,
    NTabs,
    NTabPane,
    NForm,
    NFormItem,
    NInput,
    NInputNumber,
    NInputGroup,
    NInputGroupLabel,
    NSelect,
    NColorPicker,
    NSwitch,
    NSlider,
    NDatePicker,
    NDynamicTags,
    NUpload,
    NRadioGroup,
    NRadio
} from 'naive-ui'
import type { FormInst } from 'naive-ui'

const router = useRouter()
const formRef = ref<FormInst | null>(null)

// 表单数据
const formData = reactive({
    name: '未命名项目',
    description: '',
    createDate: Date.now(),
    tags: [] as string[],
    coverImage: '',
    canvas: {
        width: 1280,
        height: 720,
        backgroundColor: '#ffffff',
        fps: 30,
        showGrid: false,
        gridSize: 20
    },
    export: {
        format: 'mp4',
        quality: 8,
        resolution: 'same',
        width: 1280,
        height: 720
    },
    advanced: {
        autoSave: true,
        autoSaveInterval: 5,
        historySteps: 50,
        defaultTransitionDuration: 1.0,
        performanceMode: 'balanced'
    }
})

// 表单验证规则
const rules = {
    name: {
        required: true,
        message: '请输入项目名称',
        trigger: 'blur'
    }
}

// 导出格式选项
const exportFormatOptions = [
    { label: 'MP4 视频', value: 'mp4' },
    { label: 'WebM 视频', value: 'webm' },
    { label: 'GIF 动画', value: 'gif' },
    { label: 'PNG 序列', value: 'png-sequence' }
]

// 性能模式选项
const performanceModeOptions = [
    { label: '高性能', value: 'performance' },
    { label: '平衡', value: 'balanced' },
    { label: '高质量', value: 'quality' }
]

// 项目封面文件列表
const coverFileList = ref<UploadFileInfo[]>([])

// 设置预设画布尺寸
const setPreset = (preset: string) => {
    switch (preset) {
        case 'hd':
            formData.canvas.width = 1280
            formData.canvas.height = 720
            break
        case 'fullHd':
            formData.canvas.width = 1920
            formData.canvas.height = 1080
            break
        case '4k':
            formData.canvas.width = 3840
            formData.canvas.height = 2160
            break
    }
}

// 处理文件上传
const handleUpload = (options: { file: UploadFileInfo }) => {
    const { file } = options

    // 这里通常会上传到服务器
    // 这里简化为直接设置路径
    formData.coverImage = URL.createObjectURL(file.file as File)

    // 更新文件列表
    coverFileList.value = [file]

    return false // 阻止默认上传行为
}

// 保存设置
const save = () => {
    formRef.value?.validate((errors) => {
        if (!errors) {
            // 保存项目设置
            console.log('保存项目设置:', formData)

            // 返回编辑器
            router.push('/workspace/editor')
        }
    })
}

// 取消
const cancel = () => {
    // 返回编辑器，不保存修改
    router.push('/workspace/editor')
}
</script>

<style lang="scss" scoped>
.project-settings-container {
    padding: 24px;
    min-height: 100vh;
    background-color: var(--body-color);

    .settings-card {
        max-width: 960px;
        margin: 0 auto;
    }
}
</style>